<?php
$baseUrl= base_url();
?>
<html>
<head>
<meta  http-equiv='content-type' content="text/html;charset=utf-8"></meta>
<title>Exercise</title>

<style type="text/css">
/*matching style*/
.question-num,.source-list,.target-list{
	float:left;
}

.target-list{
	margin-left:30px;
}

.source-list li div {
    float: left;
    line-height: 30px;
    position: relative;
}

.target-list li div {
    float: left;
    line-height: 30px;
    position: relative;
}


/*select style*/
.multiple-choice-radio{
	background: url("/images/radio-button.png") repeat scroll 0 0 transparent;
	display: block;
	float: left;
	height: 29px;
	line-height: 29px;
	margin-right: 5px;
	width: 29px;
}
ul{
	padding:0;
}

.question-number {
	float: left;
	margin-right: 10px;
}
	
.multiple-choice-question-fields li {
	display: inline-block;
	width: 200px;
}

.multiple-choice-question-fields {
	float: left;
	margin: 10px;
	width: 440px;
}

/*Dictation style*/
.student-play{
    background: url("/images/lesson-speaker.png") repeat scroll 0 0 transparent;
    display: inline-block;
    height: 42px;
    width: 49px;
}
.dictation-input input{
  width: 500px;
}
.dictation-question-fields{
	float:left;
}

</style>

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="<?=$baseUrl.'js/wireit/lib/yui/fonts/fonts-min.css' ?>" /> 
<link rel="stylesheet" type="text/css" href="<?=$baseUrl.'js/wireit/lib/yui/reset/reset-min.css' ?>" />
<script type="text/javascript" src="<?=$baseUrl.'js/wireit/lib/yui/utilities/utilities.js' ?>"></script>


<!-- jPlayer -->
<link href="<?=$baseUrl.'skin/jplayer/blue.monday/jplayer.blue.monday.css' ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?=$baseUrl.'js/jquery.min.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl.'js/jquery.jplayer.min.js'?>"></script>

<!-- wireit -->
<script type="text/javascript" src="<?=$baseUrl.'js/wireit/js/WireIt.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl.'js/wireit/js/CanvasElement.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl.'js/wireit/js/Wire.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl.'js/wireit/js/Terminal.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl.'js/wireit/js/util/DD.js'?>"></script>
<link rel="stylesheet" type="text/css" href="<?=$baseUrl.'js/wireit/css/WireIt.css' ?>" />


<script type="text/javascript">
jQuery(function(){

	var source_1 = YAHOO.util.Dom.get('source-1');
	var source_2 = YAHOO.util.Dom.get('source-2');
	var source_3 = YAHOO.util.Dom.get('source-3');
	var source_4 = YAHOO.util.Dom.get('source-4');

	var target_1 = YAHOO.util.Dom.get('target-1');
	var target_2 = YAHOO.util.Dom.get('target-2');
	var target_3 = YAHOO.util.Dom.get('target-3');
	var target_4 = YAHOO.util.Dom.get('target-4');

	var sourceListTerminal=new Array();
	var targetListTerminal = new Array();

	sourceListTerminal[0]=new WireIt.Terminal(source_1,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0] //left,top
	});

	sourceListTerminal[1]=new WireIt.Terminal(source_2,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0]
	});
	sourceListTerminal[2]=new WireIt.Terminal(source_3,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		
		offsetPosition:[0,0]
	});
	sourceListTerminal[3]=new WireIt.Terminal(source_4,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0]
	});
//value template

	targetListTerminal[0]=new WireIt.Terminal(target_1,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});

	targetListTerminal[1]=new WireIt.Terminal(target_2,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});

	targetListTerminal[2]=new WireIt.Terminal(target_3,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});

	targetListTerminal[3]=new WireIt.Terminal(target_4,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});
 

});

</script>

</head>
<body>

<!-- matching question -->
<div class="matching-container">
<h1>Matching</h1>
	<ul><li>
		<div class="question-num">
			<div class='maching-incorrect-pic'></div>1)
		</div>
		<ul class="source-list">
			<li>
				<div class="source-text">source_1</div><div id="source-1"></div>
			</li>

			<li>
				<div class="source-text">source_2</div><div id="source-2"></div>
			</li>

			<li>
				<div class="source-text">source_3</div><div id="source-3"></div>
			</li>

			<li>
				<div class="source-text">source_4</div><div id="source-4"></div>
			</li>
		</ul>
		<ul class="target-list">
			<li>
				<div id="target-1"></div><div class="target-text">target_1</div>
			</li>

			<li>
				<div id="target-2"></div><div class="target-text">target_2</div>
			</li>

			<li>
				<div id="target-3"></div><div class="target-text">target_3</div>
			</li>

			<li>
				<div id="target-4"></div><div class="target-text">target_4</div>
			</li>
		
		</ul>
	</li></ul>
</div>
<div style="clear:both"></div>
<!-- multi selects -->
<div class='selects-container'>
	<h1>Selects</h1>
    <ul id="multiple-choice-questions" >
    	<li id="multiple-choice-question-1" class="multiple-choice-question  altrow">
    		<div id="multiple-choice-question-1-score"  class='incorrect'></div>
    		<div class="question-number"><div id="dictation-question-1-score"></div>1)</div>
    		<div class="question-text">There's too much information here. Please just tell me what it all </div>
    		<div class="multiple-choice-question-fields">
    			<ul>
    				<li>
    					<input id="" type="hidden" value=""></input>
    					<a href="javascript:;" class="selected"><span class="multiple-choice-radio"></span>A:field value</a>
    				</li>
    				<li>
    					<input id="id" type="hidden" value=""></input>
    					<a href="javascript:;" class="selected"><span class="multiple-choice-radio"></span>B:field value</a>
    				</li>
    				<li>
    					<input id="" type="hidden" value=""></input>
    					<a href="javascript:;" class="selected"><span class="multiple-choice-radio"></span>C:field value</a>
    				</li>
    				<li>
    					<input id="" type="hidden" value=""></input>
    					<a href="javascript:;" class="selected"><span class="multiple-choice-radio"></span>D:field value</a>
    				</li>
    			</ul>
    		</div>
    	</li>
    </ul>
</div>

<div style="clear:both"></div>
<!-- Dictation -->
    <div class='dictation-container'>
    	<h1>Dictation</h1>
        <ul id="dictation-questions">
        	<li id="dictation-question-1" class="dictation-question  ">
        		<div style="margin-left: 10px">
        			<div id="dictation-question-1-score"></div>
        			<div class="question-number"><div id="dictation-question-1-score"></div>1)</div>
        			<ul class="dictation-question-fields">
    					<li>
    						<span class="student-play"  title="play"></span>
    						<div class="dictation-input"><input id="1_answer" value="" class="rtl"></input></div>
    						<div class="dictation-correct-answer"><div id="correct"></div>&nbsp;</div>
    					</li>
        			</ul>
        		</div>
        	</li>
        </ul>
    </div>
 </body>
</html>